<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" scroll-x="true">
			<block v-for="(tab,index) in tabBars" :key="index" :style="scrollStyle">
				<view class="swiper-tab-list" @tap="tabtap(index)" :class="tabIndex===index?'tab-choice' : ''"
					:style="scrollItemStyle">
					{{tab.title}}
				</view>
			</block>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		props: {
			tabBars: Array,
			tabIndex: Number,
			scrollStyle: {
				type: String,
				default: ""
			},
			scrollItemStyle: {
				type: String,
				default: ""
			}
		},
		methods: {
			//点击切换导航
			tabtap(index) {
				this.$emit('tabtap', index)
			},
		}
	}
</script>
<style scoped>
	scroll-view::-webkit-scrollbar {
		display: none;
	}

	.uni-swiper-tab {
		width: 100%;
		height: 90rpx;
		white-space: nowrap;
		display: flex;
		// 垂直居中
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: 1px solid #f5f5f5;
		width: 100%;
		z-index: 3;
		line-height: 90rpx;
	}

	.swiper-tab-list {
		display: inline-block;
		flex-shrink: 0;
		font-size: 28rpx;
		color: #333333;
		margin: 0 20rpx;
	}

	.uni-tab-bar .active {
		color: #00a660;
	}

	.tab-choice {
		//当前选中 基于此类名给与底部选中框
		position: relative;
		color: #00a660;
	}

	.tab-choice:before {
		content: "";
		position: absolute;
		left: 0;
		top: 84rpx;
		width: 100%;
		height: 4rpx;
		border-radius: 2rpx;
		background: #00a660;
	}
</style>
